<template>
	<div class="ivu-box">
		<Breadcrumb>
			<BreadcrumbItem>用户管理</BreadcrumbItem>
			<BreadcrumbItem>新增管理员</BreadcrumbItem>
		</Breadcrumb>
		<Form ref="formInline" inline>
			<FormItem>
				<Button type="default" @click="$router.go('-1')">返回</Button>
			</FormItem>
		</Form>
		<div class="form_box">
			<Form ref="formCustom" style="width: 850px;" :model="form" :label-width="100">
				<FormItem label="email">
					<Input type="email" v-model="form.email" style="width:500px;" placeholder="请输入邮箱"></Input>
				</FormItem>
				<FormItem label="用户名">
					<Input type="text" v-model="form.username" style="width:500px;" placeholder="请输入用户名"></Input>
				</FormItem>
				<FormItem label="用户密码">
					<Input type="password" password v-model="form.password" style="width:500px;"
						placeholder="请输入用户密码"></Input>
				</FormItem>
				<h3 style="width: 100px;text-align: right;margin-bottom: 24px;">权限设置</h3>
				<FormItem label="角色:">
					<RadioGroup v-model="selectData" vertical @on-change="changeSelect">
						<Radio :label="index+''"  disabled v-for="(item,index) in list" :key="index">
							{{item.title}}
						</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="权限预览">

					<CheckboxGroup v-model="list_">
						<div v-for="(item , index) in data" :key="index" class="outer">
							<div class="checkboxs">
								<Checkbox :label="item.id" disabled border>{{item.title}}</Checkbox>
							</div>
							<div v-if="item.child.length != 0" class="subordinate">
								<div v-for="(item , index) in item.child" :key="index">
									<Checkbox class="checkbox" disabled :label="item.id" border>{{item.title}}</Checkbox>
									<Checkbox v-for="(i , idx) in item.children"  disabled  :key="idx" :label="i.id" class="check"
										border>{{i.title}}</Checkbox>
								</div>
							</div>
						</div>
					</CheckboxGroup>

				</FormItem>

				<FormItem>
					<Button type="primary" @click="Submit">确定</Button>&nbsp;&nbsp;&nbsp;&nbsp;
					<Button type="default" @click="$router.go('-1')">取消</Button>
				</FormItem>
			</Form>
		</div>

	</div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
        email: ''
      },
      selectData: '0', // 权限组选中下标
      selectList: [], // 权限预览id
      show: true,

      list_: [],

      list: [],
      roleList: [],

      checkAll: true,
      role_id: null,
      data: []
    }
  },
  created () {
    this.getlist()
    this.all()
  },
  methods: {
    all () {
      this.axios.post('role/rule_list').then(res => {
        if (res.code == 1) {
          var arr = res.data
          this.data = arr
        }
      })
    },

    Submit () {
      var form = this.form
      form.role_id = this.role_id
      console.log(form)
      // this.axios.post('account/addAccount',form ).then(res => {
      this.axios.post('manager/managerAddOperator', form).then(res => {
        if (res.code == 1) {
          this.$Message.success('添加成功')
          this.$router.go(-1)
        }
      })
    },

    getlist () {
      this.axios.post('role/role_list', this.request).then(res => {
        if (res.code == 1) {
          this.list = []
          // this.role_id =this.list[0].id;
          var arr = res.data.list

          for (var i = 0, len = arr.length; i < len; i++) {
            if (arr[i].id == 7) {
              this.list.push(arr[i])
            }
          }
          this.role_id = 7
          this.getRole()
        }
      })
    },

    getRole () {
      this.axios.post('role/get_role_rule', { role_id: this.role_id }).then(res => {
        if (res.code == 1) {
          this.list_ = res.data
          console.log(this.list_)
        }
      })
    },
    changeSelect (e) {
      console.log('选择', e)
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
      this.role_id = this.list[e].id
      this.getRole()
    }

  }

}
</script>

<style scoped>
	h3 {
		line-height: 50px;
	}

	.subordinate {
		margin: 10px 20px;
	}

	.checkbox {
		margin: 5px 10px;
		min-width: 200px;
	}

	.check {
		margin-top: 5px;
		margin-left: 30px;
		min-width: 160px;
	}

	.checkboxs {
		border-bottom: 1px solid silver;
		padding-bottom: 10px;
	}

	.outer {
		margin: 20px 0;
		padding: 10px;
		border: 1px solid silver;
		border-radius: 5px;
	}
</style>
